<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./List.css" rel="stylesheet">
    <title>学生列表-todoList</title>
</head>

<body>
    <template id="insert">
        <section class="model" v-show="value">
            <header>
                <h2>学生增加</h2>
                <span class="iconfont icon-guanbi close" @click="handleClose"></span>
            </header>
            <form @submit.prevent="handleInsert">
                <section class="form-box">
                    <div class="form-row">
                        <label class="form-label" for="name">姓<span class="space-2"></span>名</label>
                        <input class="form-item" type="text" id="name" required maxlength="18" v-model="formData.name">
                    </div>
                    <div class="form-row">
                        <label class="form-label">性<span class="space-2"></span>别</label>
                        <div class="radio-box">
                            <div>男：<input type="radio" value="1" v-model="formData.sex" checked></div>
                            <div>女：<input type="radio" value="2" v-model="formData.sex"></div>
                        </div>
                    </div>
                    <div class="form-row">
                        <label class="form-label" for="tel">电话号码</label>
                        <input class="form-item" type="tel" required id="tel" maxlength="11" pattern="1\d{10}" v-model="formData.tel">
                    </div>
                    <div class="form-row">
                        <label class="form-label">专<span class="space-2"></span>业</label>
                        <select class="form-item" v-model="formData.major" required>
                            <option value=""></option>
                            <option value="1">JAVA</option>
                            <option value="2">WEB</option>
                            <option value="3">UI</option>
                        </select>
                    </div>
                    <div class="form-row">
                        <button class="btn">增加</button>
                        <button class="btn" type="button" @click="handleClear">清空</button>
                        <button class="btn-remove" type="button" @click="$emit('input',false)">关闭</button>
                    </div>
                </section>
            </form>
        </section>

    </template>
    <template id="update">
        <section class="model" v-show="value">
            <header>
                <h2>学生修改</h2>
                <span class="iconfont icon-guanbi close"  @click="handleClose"></span>
            </header>
            <form @submit.prevent="handleUpdate">
                <section class="form-box">
                    <div class="form-row">
                        <label class="form-label" for="name">姓名</label>
                        <input class="form-item" type="text" id="name" required maxlength="18" v-model="formData.name">
                    </div>
                    <div class="form-row">
                        <label class="form-label">性别</label>
                        <div class="radio-box">
                            <div>男：<input type="radio" value="1" v-model="formData.sex"></div>
                            <div>女：<input type="radio" value="2" v-model="formData.sex"></div>
                        </div>
                    </div>
                    </div>
                    <div class="form-row">
                        <label class="form-label" for="tel">电话</label>
                        <input class="form-item" type="tel" required id="tel" maxlength="11" pattern="1\d{10}" v-model="formData.tel">
                    </div>
                    <div class="form-row">
                        <label class="form-label">专业</label>
                        <select class="form-item" v-model="formData.major" required>
                            <option value=""></option>
                            <option value="1">JAVA</option>
                            <option value="2">WEB</option>
                            <option value="3">UI</option>
                        </select>
                    </div>
                    <div class="form-row">
                        <button class="btn" @click="handleUpdate">修改</button>
                        <button class="btn" type="button" @click="handleReset">重置</button>
                        <button class="btn-remove" type="button" @click="$emit('input',false)">关闭</button>
                    </div>
                </section>
            </form>
        </section>
    </template>
    <template id="list">
        <section>
            <insert v-if="useObject.insert" v-model="showObject.insert" @inserted="handleInserted"></insert>
            <update v-if="useObject.update" v-model="showObject.update" @updated="handleUpdated" :row-data="rowData"></update>
            <section class="container">
                <h2 class="h2">查询列表</h2>
                <header class="form-box">
                    <div class="form-row">
                        <button class="btn" @click="handleShow('insert')" type="button">增加</button>
                        <button class="btn" @click="handleSave()" type="button">保存</button>
                    </div>
                </header>
                <h2 class="h2">学生列表</h2>
                <table class="table">
                    <thead>
                        <tr>
                            <th>编码</th>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>专业</th>
                            <th>电话</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,idx) in tableList">
                            <td>{{item.id}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.sex == '1' ? '男' : '女'}}</td>
                            <td>{{item.major == '1' ? "JAVA" : item.major == 2 ? 'WEB' : "UI"}}</td>
                            <td>{{item.tel}}</td>
                            <td>
                                <span @click.prevent="handleDelete(item.id)" class="iconfont icon-del"></span>
                                <span @click.prevent="handleShow('update',item)" class="iconfont icon-bianji"></span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </section>
        </section>

    </template>
    <main id="app">
        <list></list>
    </main>
</body>
<script src="../../vue.js"></script>
<script src="./components.js"></script>
<script>
    new Vue({
        el: "#app"
    })
</script>

</html>